<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="服务商名称" prop="name">
                        <div class="filters-input">
                            <Input v-model="filters.name" clearable placeholder="服务商名称" size="large"/>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" size="large" @click="handleQuery('form1')">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <Row class="form-row">
                <Button type="primary" icon="md-add" size="large" @click="handleAdd()">
                    新增
                </Button>
            </Row>

            <el-table stripe border :loading="tableLoading" :data="tableData" size="large"
                      ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="name" label="服务商名称"></el-table-column>
                <el-table-column prop="title" label="系统标题"></el-table-column>
                <el-table-column prop="address" label="联系地址"></el-table-column>
                <el-table-column prop="propertyNo" label="域名"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <!--<el-button
                            size="mini"
                            type="primary"
                            @click="lyModify(scope.row)">修改
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="lyDelete(scope.row)">删除
                        </el-button>-->
                        <el-dropdown>
                            <el-button type="primary">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="lyModify(scope.row)">修改
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="lyConfigure(scope.row)">配置
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="lyDelete(scope.row)">删除
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="formVisible" :mask-closable="false" :closable="false" :title="modal && modal.id ? '修改' : '新增'"
               width="900">
            <Form :model="modal" :rules="rule" ref="form1" label-position="right" :label-width="110" class="myOpenFrom">
                <input name="typeInt" value="2" type="hidden"/>
                <input name="parentId" value="1" type="hidden"/>
                <FormItem label="服务商名称" prop="name">
                    <Input v-model="modal.name" placeholder="服务商名称" size="large"></Input>
                </FormItem>

                <FormItem label="系统title">
                    <Input v-model="modal.title" placeholder="系统title" size="large"></Input>
                </FormItem>
                <FormItem label="联系地址">
                    <Input v-model="modal.address" placeholder="联系地址" size="large"></Input>
                </FormItem>

                <FormItem label="域名地址">
                    <Input v-model="modal.propertyNo" placeholder="域名地址" size="large"></Input>
                </FormItem>
                <FormItem label="登录界面背景图片">
                    <el-upload @click.native=loginPicName(modal.name)
                               accept="image/jpeg,image/jpg,image/png"
                               ref="upload"
                               class="avatar-uploader"
                               :headers="{'x-access-token':token}"
                               :action="act"
                               :show-file-list="false"
                               :data="loginPicUrl"
                               :disabled="disabledOne"
                               :on-success="handleAvatarSuccess"
                               :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar-oneImg">
                        <i v-else class="el-icon-plus avatar-uploader-icon-oneImg"></i>
                    </el-upload>
                    <p>建议尺寸为1920 X 1080px,支持jpg,jpeg,png格式</p>
                    <input type="hidden" name="loginPic" v-model="modal.loginPic"/>
                </FormItem>
                <Row>
                    <Col span="13">
                        <FormItem label="logo大图片">
                            <el-upload @click.native=logoPicName(modal.name)
                                       accept="image/jpeg,image/jpg,image/png"
                                       ref="upload1"
                                       class="avatar-uploader"
                                       :headers="{'x-access-token':token}"
                                       :action="act"
                                       :show-file-list="false"
                                       :disabled="disabledTwo"
                                       :data="logoPicUrl"
                                       :on-success="handleAvatarSuccess1"
                                       :before-upload="beforeAvatarUpload1">
                                <img v-if="imageUrl1" :src="imageUrl1" class="avatar-twoImg">
                                <i v-else class="el-icon-plus avatar-uploader-icon-twoImg"></i>
                            </el-upload>
                            <p>建议尺寸为312 X 87px,支持jpg,png,jpeg格式</p>
                            <input type="hidden" name="logoPic" v-model="modal.logoPic"/>
                        </FormItem>

                    </Col>
                    <Col span="11">
                        <FormItem label="logo小图片">
                            <el-upload @click.native=logoMinPicName(modal.name)
                                       accept="image/jpeg,image/jpg,image/png"
                                       ref="upload2"
                                       class="avatar-uploader"
                                       before-upload="handleImagesUrlBefore"
                                       :headers="{'x-access-token':token}"
                                       :action="act"
                                       :show-file-list="false"
                                       :disabled="disabledThree"
                                       :data="logoMinPicUrl"
                                       :on-success="handleAvatarSuccess2"
                                       :before-upload="beforeAvatarUpload2">
                                <img v-if="imageUrl2" :src="imageUrl2" class="avatar-threeImg">
                                <i v-else class="el-icon-plus avatar-uploader-icon-threeImg"></i>
                            </el-upload>
                            <p>建议尺寸为91 X 91px,支持jpg,png,jpeg格式</p>
                            <input type="hidden" name="logoMinPic" v-model="modal.logoMinPic"/>
                        </FormItem>
                    </Col>
                </Row>


            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>


        <Modal v-model="setModal" :mask-closable="false" :closable="false"
               :title="modal1 && modal1.id ? '修改配置' : '新增配置'"
               width="900">
            <Form :model="modal1" :rules="rule" ref="form2" label-position="right" :label-width="110"
                  class="myOpenFrom">
                <Tabs>

                    <TabPane label="快递员配置">
                        <input name="parentId" type="hidden" v-model="modal1.parentId"/>

                        <FormItem label="支付宝APPID">
                            <Input v-model="modal1.kdAlipayAppId" placeholder="支付宝分配给开发者的APPID" size="large"></Input>
                        </FormItem>

                        <FormItem label="支付宝公钥">
                            <Input v-model="modal1.kdAlipayPulicKey" type="textarea" :autosize="{minRows: 3,maxRows: 5}"
                                   placeholder="支付宝公钥"
                                   size="large"></Input>
                        </FormItem>
                        <FormItem label="支付宝应用私钥">
                            <Input v-model="modal1.kdAlipayPrivateKey" type="textarea"
                                   :autosize="{minRows: 6,maxRows: 5}" placeholder="支付宝应用私钥" size="large"></Input>
                        </FormItem>
                        <FormItem label="微信APPID">
                            <Input v-model="modal1.kdWeixinAppId" placeholder="微信分配给开发者的APPID" size="large"></Input>
                        </FormItem>

                        <FormItem label="快递员微信Secret">
                            <Input v-model="modal1.kdWeixinSecret" placeholder="微信分配给开发者的APPID" size="large"></Input>
                        </FormItem>

                        <FormItem label="微信云支付门店id">
                            <Input v-model="modal1.out_shop_id" placeholder="微信云支付门店全局id" size="large"></Input>
                        </FormItem>
                        <FormItem label="云支付订单前缀">
                            <Input v-model="modal1.order_prefix" placeholder="云支付订单前缀" size="large"></Input>
                        </FormItem>

                    </TabPane>
                    <TabPane label="支付配置">

                        <FormItem label="支付宝APPID">
                            <Input v-model="modal1.payAlipayAppId" placeholder="支付宝分配给开发者的APPID" size="large"></Input>
                        </FormItem>
                        <FormItem label="支付宝公钥">
                            <Input v-model="modal1.payAlipayPulicKey" type="textarea"
                                   :autosize="{minRows: 3,maxRows: 5}" placeholder="支付宝公钥"
                                   size="large"></Input>
                        </FormItem>
                        <FormItem label="支付宝应用私钥">
                            <Input v-model="modal1.payAlipayPrivateKey" type="textarea"
                                   :autosize="{minRows: 6,maxRows: 5}" placeholder="支付宝应用私钥" size="large"></Input>
                        </FormItem>
                        <FormItem label="支付宝用户ID(分润)">
                            <Input v-model="modal1.payAlipayUserId" placeholder="支付宝公钥"
                                   size="large"></Input>
                        </FormItem>
                        <FormItem label="微信APPID">
                            <Input v-model="modal1.payWeixinAppId" placeholder="微信分配给开发者的APPID" size="large"></Input>
                        </FormItem>
                        <FormItem label="微信商户号">
                            <Input v-model="modal1.payWeixinMchId" placeholder="微信商户号" size="large"></Input>
                        </FormItem>
                        <FormItem label="微信key">
                            <Input v-model="modal1.payWeixinKey" placeholder="微信key" size="large"></Input>
                        </FormItem>
                    </TabPane>


                    <TabPane label="停车配置">
                        <FormItem label="支付宝代扣APPID">
                            <Input v-model="modal1.payAlipayWithHoldAppId" placeholder="支付宝应用私钥" size="large"></Input>
                        </FormItem>

                        <FormItem label="支付宝代扣支付秘钥">
                            <Input v-model="modal1.payAlipayWithHoldPrivateKey" type="textarea"
                                   :autosize="{minRows: 6,maxRows: 5}" placeholder="支付宝应用私钥" size="large"></Input>
                        </FormItem>

                        <FormItem label="支付宝代扣支付公钥">
                            <Input v-model="modal1.payAlipayWithHoldPublicKey" type="textarea"
                                   :autosize="{minRows: 6,maxRows: 5}" placeholder="支付宝应用私钥" size="large"></Input>
                        </FormItem>

                        <FormItem label="支付宝代扣支付用户ID(分润)">
                            <Input v-model="modal1.payAlipayWithHoldUserId" type="textarea"
                                   :autosize="{minRows: 6,maxRows: 5}" placeholder="支付宝应用私钥" size="large"></Input>
                        </FormItem>

                    </TabPane>

                    <TabPane label="其他">

                        <FormItem label="代创建生活号appid">
                            <Input v-model="modal1.daiAlipayAppId" placeholder="支付宝应用私钥" size="large"></Input>
                        </FormItem>
                        <FormItem label="代创建生活号私钥">
                            <Input v-model="modal1.daiAlipayPrivateKey" type="textarea"
                                   :autosize="{minRows: 6,maxRows: 5}" placeholder="支付宝应用私钥" size="large"></Input>
                        </FormItem>
                        <FormItem label="代创建生活号公钥">
                            <Input v-model="modal1.daiAlipayPulicKey" type="textarea"
                                   :autosize="{minRows: 6,maxRows: 5}" placeholder="支付宝应用私钥" size="large"></Input>
                        </FormItem>
                    </TabPane>
                </Tabs>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="serviceSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>


    </div>
</template>

<script>
    import baseURL from '_conf/url'
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from 'js-cookie'
    import {TOKEN_KEY} from '@/libs/util'

    const token = Cookies.get(TOKEN_KEY)
    const act = baseURL + "/common/uploadImg"
    //校验规则
    const rules = {
        name: [
            {
                required: true,
                message: "请输入名称",
                trigger: "blur"
            }
        ],
        name1: [
            {
                required: true,
                message: "请输入名称",
                trigger: "blur"
            }
        ],
        name2: [
            {
                required: true,
                message: "请输入名称",
                trigger: "blur"
            }
        ],
        lname: [
            {
                required: true,
                message: "请输入联系人姓名",
                trigger: "blur"
            }
        ],
        phone: [
            {
                required: true,
                message: "请输入手机号",
                trigger: "blur"
            }
        ],
        publicKey: [
            {
                required: true,
                message: "请输入公钥",
                trigger: "blur"
            }
        ],
        privateKey: [
            {
                required: true,
                message: "请输入私钥",
                trigger: "blur"
            }
        ],
        status: [
            {
                required: true,
                message: "请选择签名类型",
                trigger: "change"
            }
        ]
    };

    //加载数据
    let loadData = function () {
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.filters;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
        params.typeInt = 1;
        //与后台交换数据
        this.postRequest("/api/dept/loadData", params).then(res => {
            console.log(res)
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;

            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //查询
    let handleQuery = function (name) {
        this.filters.pageNum = 1;
        this.loadData();

    };

    //打开页面
    let handleAdd = function () {

        let url = "/api/dept/openModel?typeInt=1";
        this.imageUrl = "";
        this.imageUrl1 = "";
        this.imageUrl2 = "";
        this.modal = {"typeInt": "1", "parentId": "1"};

        this.getRequest(url).then(res => {
            this.tableLoading = false;
            console.log(res);

            if (res.code == 20000) {
                if (res.data.dept) {
                    this.modal = res.data.dept;
                }

                this.formVisible = true;
            } else {
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //保存
    let save = function () {


        console.log(this.modal);
        this.postRequest("/api/dept/saveOrUpdate", this.modal).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.$Message.success('操作成功！');
                this.formLoading = false;
                this.formVisible = false;
                this.$refs["form1"].resetFields();
                this.$refs.upload.clearFiles();
                this.$refs.upload1.clearFiles();
                this.$refs.upload2.clearFiles();
                this.loadData();
            } else {
                this.formLoading = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //配置信息保存
    let add = function () {
        this.postRequest("/api/dept/addServiceInfo", this.modal1).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.formLoading = false;
                this.setModal = false;
            } else {
                this.setModal = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };


    //保存服务商信息
    let handleSubmit = function () {
        this.$refs["form1"].validate(valid => {
            if (valid) {
                this.formLoading = true;
                this.save();
            }
        });
    };
    //保存服务商配置信息
    let serviceSubmit = function () {
        this.formLoading = true;
        this.add();
    };


    let onCancel = function () {
        this.$refs["form1"].resetFields();
        this.$refs["form2"].resetFields();
        this.formLoading = false;
        this.setModal = false;
        this.formVisible = false;
    };

    export default {
        data() {
            return {
                token:token,
                loginPicUrl: {},
                logoPicUrl: {},
                logoMinPicUrl: {},
                disabledOne: true,
                disabledTwo: true,
                disabledThree: true,
                act: act,
                imageUrl: '',
                imageUrl1: '',
                imageUrl2: '',
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,

                //验证规则
                rule: rules,

                //表格数据
                tableData: [],
                //表格字段
                //数据表格隐藏那个状态
                tableLoading: false,
                //对话框隐藏状态
                formVisible: false,
                setModal: false,
                //表单提交状态
                formLoading: false,
                //第一个modal
                modal: {},
                //第二个modal
                modal1: {},
                //第三个modal
                modal2: {},
                //第四个modal
                modal3: {},
                //第五个modal
                modal4: {},
                modal5: {}
            };
        },
        created: function () {
            this.loadData();
        },
        methods: {
            loadData,
            save,
            add,
            handleQuery,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            handleAdd,
            handleSubmit,
            serviceSubmit,
            onCancel,
            handleAvatarSuccess(res, file) {
                this.modal.loginPic = res;
                this.imageUrl = URL.createObjectURL(file.raw);

            },
            delDept: function (id) {
                let url = "/api/dept/delete?id=" + id
                this.postRequest(url).then(resp => {
                    console.log(resp)
                    if (resp.code == 20000) {
                        this.formVisible = false
                        this.$Message.success("成功")
                        this.loadData()
                        return
                    }
                    this.$Message.error(resp.message);
                })
            },

            serviceInfo: function (id) {
                let url = "/api/dept/getServiceInfo?pid=" + id
                this.postRequest(url).then(resp => {
                    if (resp.code == 20000) {
                        if (resp.data) {
                            this.setModal = true;
                            this.modal1 = resp.data;
                        }
                    } else {
                        this.modal1.parentId = id;
                        this.setModal = true;

                    }

                })
            },


            beforeAvatarUpload(file) {

                const isSize = new Promise(function (resolve, reject) {

                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();

                    img.onload = function () {
                        let valid = img.width <= 1920 && img.height <= 1080;
                        valid ? resolve() : reject();
                    }
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    this.$Message.info({
                        content: '图片长宽不能大于1920X1080',
                        duration: 5,
                        closable: true
                    });
                    return Promise.reject();
                });

                return isSize;


            },

            handleAvatarSuccess1(res, file) {
                this.modal.logoPic = res;
                this.imageUrl1 = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload1(file) {


                const isSize = new Promise(function (resolve, reject) {

                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();
                    img.onload = function () {
                        let valid = img.width <= 312 && img.height <= 87;
                        valid ? resolve() : reject();
                    }
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    this.$Message.info({
                        content: '图片长宽不能大于312X87',
                        duration: 5,
                        closable: true
                    });
                    return Promise.reject();
                });
                return isSize
            },

            handleAvatarSuccess2(res, file) {
                this.modal.logoMinPic = res;
                this.imageUrl2 = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload2(file) {
                const isSize = new Promise(function (resolve, reject) {

                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();
                    img.onload = function () {
                        let valid = img.width <= 91 && img.height <= 91;
                        valid ? resolve() : reject();
                    }
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    this.$Message.info({
                        content: '图片长宽不能大于91X91',
                        duration: 5,
                        closable: true
                    });
                    return Promise.reject();
                });
                return isSize

            },
            //    row 删除按钮
            lyDelete: function (row) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '确定删除此服务商？',
                    onOk: () => {
                        this.getRequest("/api/dept/delete?id=" + row.id).then(res => {
                            this.tableLoading = false;
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.pageNum = 1;
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                    onCancel: () => {
                        // this.$Message.info('Clicked cancel');
                    }
                });

            },
            //    row 配置按钮
            lyConfigure: function (row) {
                this.serviceInfo(row.id);
            },
            //    row 修改按钮
            lyModify: function (row) {
                this.getRequest("/api/dept/openModel?typeInt=1&id=" + row.id).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        if (res.data.dept) {
                            this.modal = res.data.dept;
                            this.imageUrl = res.data.dept.loginPic;
                            this.imageUrl1 = res.data.dept.logoPic
                            this.imageUrl2 = res.data.dept.logoMinPic;
                        }
                        this.formVisible = true;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });

            },

            //    返回图片一 name
            loginPicName: function (name) {
                if (!name) {
                    this.disabledOne = true;
                    this.$Message.warning('请先输入服务商名称！');
                    return
                } else {
                    this.loginPicUrl = {
                        fileName: "deptImage/"+name+"_loginPic"
                    }
                    this.disabledOne = false;
                    console.log(this.loginPicUrl);
                }
            },
            //    返回图片二 name
            logoPicName: function (name) {
                if (!name) {
                    this.disabledTwo = true;
                    this.$Message.warning('请先输入服务商名称！');
                    return
                } else {
                    this.logoPicUrl = {
                        fileName: "deptImage/"+name+"_logoPic"
                    }
                    this.disabledTwo = false;
                    console.log(this.logoPicUrl);
                }
            },
            //    返回图片三 name
            logoMinPicName: function (name) {
                if (!name) {
                    this.disabledThree = true;
                    this.$Message.warning('请先输入服务商名称！');
                    return
                } else {
                    this.logoMinPicUrl = {
                        fileName: "deptImage/"+name+"_logoMinPic"
                    }
                    this.disabledThree = false;
                    console.log(this.logoMinPicUrl);
                }
            }

        }
    };
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon-oneImg {
        font-size: 28px;
        color: #8c939d;
        /*width: 178px;*/
        /*height: 178px;*/
        width: 250px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar-oneImg {
        width: 250px;
        height: 120px;
        display: block;
    }

    .avatar-uploader-icon-twoImg {
        font-size: 28px;
        color: #8c939d;
        width: 216px;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }

    avatar-twoImg {
        width: 108px;
        height: 30px;
        display: block;
    }

    .avatar-uploader-icon-threeImg {
        font-size: 28px;
        color: #8c939d;
        width: 90px;
        height: 90px;
        line-height: 90px;
        text-align: center;
    }

    avatar-threeImg {
        width: 90px;
        height: 90px;
        display: block;
    }


</style>
